<!--
  - Copyright (c) 2019.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div style="width: 1800px;"><!--width: 1800px;-->
  <div>
    <el-card :body-style="{padding:'16px 0px 0px 0px'}"  >
      <el-row style="width: 96%;margin:0px auto" v-show="!showAddAgain()" >
        <el-col style="padding: 16px 0px;margin-left:20px;text-align:left;color: #909399;" :span="15">
          <b>移交客户信息</b>
        </el-col>
      </el-row>
      <el-row style="width: 96%;margin:0px auto">
        <el-col>
          <div v-if="billStatus=='INITIAL'&&!showAddAgain()" style="border:1px solid #D2D2D7;">
            <el-button type="text" class="tranfer-styel" align="center" round style="font-size: 25px;color: #606266;"
                       @click="changeToCard()">
              <i class="el-icon-circle-plus " style="width: 25px"></i>
              <br/>添加需要移交的客户
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
      <el-row style="width: 96%;margin:0px auto" v-show="showAddAgain()">
        <el-col style="padding: 16px 0px;margin-left:20px;text-align:left;color: #909399;" :span="15">
          <b>移交客户信息</b>
        </el-col>
      </el-row>
      <el-row style="width: 96%;margin:0px auto">
        <el-col>
          <el-button type="primary"
                     @click="changeToCard()"
                     style="padding: 0px 18px 0px 8px;line-height: 36px;margin: 12px 0px"
                     v-show="billStatus=='INITIAL'&&showAddAgain()" round>
            <i class="joys-icon-addagain" style="margin-right: 18px;"/>
            <span style="margin: 0px;display: inline-block;font-size: 14px;">继续添加</span>
          </el-button>
        </el-col>
      </el-row>
    <ft-pagination v-show="showAddAgain()" :total="totalPage" :current-page="pageIndex" :page-size="pageSize" @pageChange="load">
      <el-table :data="customerTransferDetailList"
                ref="multipleTable"
                tooltip-effect="light"
                style="width: 96%;margin:0px auto; text-align:left;"
                @selection-change="handleSelectionChange"
                class="tableClass">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="customerName" label="客户名称" min-width="120" align="left">
      </el-table-column>
      <el-table-column label="客户类型" align="left" min-width="120">
        <template slot-scope="scope">
          <ft-enum-select v-model="scope.row.customerType"
                          service-name="lss-customer"
                          type-name="customerType"
                          :editing="false">
          </ft-enum-select>
        </template>
      </el-table-column>
      <el-table-column prop="mainManagerName" label="移交前主办" align="left" min-width="120">
      </el-table-column>
      <el-table-column prop="viceManagerName" label="移交前协办" align="left" min-width="120">
      </el-table-column>
      <el-table-column prop="deptName" show-overflow-tooltip label="移交前部门" align="left" min-width="120">
      </el-table-column>
      <el-table-column prop="identityNo" label="证件号码" align="left" min-width="120">
      </el-table-column>
      <el-table-column prop="creationTs" label="建户日期" align="left" min-width="120">
      </el-table-column>
      <el-table-column v-if="billStatus=='INITIAL'"
                       label="功能操作"
                       min-width="120" align="left">
        <template slot-scope="scope">
          <el-row aline="middle">
            <el-popover title="确认" style="font-size: 14px" placement="top" width="200" v-model="scope.row.delVisible">
              <p>数据删除后，将无法恢复，确认删除？</p>
              <div style="text-align: right; margin: 0" v-if="deleteStatus">
                <el-button style="font-size: 14px" size="small" type="text" @click="scope.row.delVisible=false;deleteStatus=false">取消
                </el-button>
                <el-button style="font-size: 14px" type="primary" size="small"
                           @click="deleteCustomer(scope.$index,scope.row);deleteStatus=false">
                  确定
                </el-button>
              </div>
              <span slot="reference" style="margin-left: .10rem" v-show="!deleteBatchStatus">
                <el-button @click="deleteStatus=true" type="text"
                           style="padding-left: 0;margin-left: 0;color: #B94A48;font-size: 14px">删除
                </el-button>
              </span>
              <span slot="reference" style="margin-left: .10rem" v-show="deleteBatchStatus">
                <el-button type="text" disabled
                           style="padding-left: 0;margin-left: 0;color: #FFD2D2;font-size: 14px">删除
                </el-button>
              </span>
            </el-popover>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    </ft-pagination>
    <el-row  style="float: right">
      <div v-show="deleteBatchStatus&&billStatus=='INITIAL'">
        <el-button @click="cancelDelete()" size="small" style="font-size: 12px;">取消</el-button>

        <el-popover title="确认" style="font-size: 14px" placement="top" width="200" v-model="deleteAllStatus">
          <p>数据删除后，将无法恢复，确认删除？</p>
          <div style="text-align: right; margin: 0">
            <el-button style="font-size: 14px" size="small" type="text" @click="deleteAllStatus=false;deleteAllStatus=false;deleteStatus=false">取消
            </el-button>
            <el-button style="font-size: 14px" type="primary" size="small"   @click="deleteBatch();deleteAllStatus=false;deleteStatus=false">确定</el-button>
          </div>
          <span slot="reference" style="margin-left: .10rem">
              <el-button @click="deleteAllStatus=false;deleteAllStatus=true;deleteStatus=true" type="primary" size="small"
                         style="font-size: 14px; background: #B94A48; color:white">删除
              </el-button>
            </span>
        </el-popover>
      </div>
    </el-row>
    <ft-dialog title=' '
               sub-title='请勾选你需要的客户移交信息，点击确定即可。'
               :visible.sync='ifshowSelect'
               top="24px" style="margin-left: 24px;margin-right: 24px;" width="100%"
               @close='changeToSelect'>
      <div slot="title">
        <span style="font-size: 13px;vertical-align: middle; float:left;">
          请勾选你需要的客户移交信息，点击确定即可。
        </span>
        <div style="display:inline; text-align: right; float: right;">
          <el-button :disabled="confirmBtn"
                     type="primary"
                     size="small"
                     style="width: 40px;height: 30px;vertical-align: middle;font-size: 5px"
                     @click="confirm()">
            <span style="font-size: 13px;vertical-align: middle;">确定</span>
          </el-button>
        </div>
      </div>
      <TransferCustomerSelectList v-if="ifshowSelect"
                                  :customerTransferId="customerTransferId"
                                  @returnValue="returnValue">
      </TransferCustomerSelectList>
    </ft-dialog>
  </div>
  <!--<div class="md-overlay" v-if="deleteStatus"></div>-->
</div>
</template>

<script>
  import TransferCustomerSelectList from './TransferCustomerSelectList'

  export default {
    components: {TransferCustomerSelectList},
    props: ['customerTransferId', 'billStatus'],
    mounted() {
      this.load()
    },
    data() {
      return {
        name: "TransferCustomerList",
        deleteAllStatus:false,
        deleteStatus:false,
        pageSize: 8,
        pageIndex: 1,
        totalPage: 0,
        customerTransferDetailList: [],
        //是否切换选择客户列表
        ifshowSelect: false,
        multipleSelection: [],
        deleteBatchStatus: false,
        //控制确定按钮点击一次
        confirmBtn:true
      }
    },
    watch: {
      // 将必输项校验结果传出
      validateData: {
        handler(val) {
          this.$emit('validate', val)
        },
        immediate: true
      },
    },
    computed: {
      // 校验当前表单数据是否合规
      validateData() {
        if (this.customerTransferDetailList && this.customerTransferDetailList.length > 0) {
          return true
        }
        return false;
      }
    },
    methods: {
      load(pageIndex,pageSize) {
        if ('' !== pageIndex && pageSize) {
          this.pageIndex = pageIndex
          this.pageSize = pageSize
        } else {
          this.pageIndex = this.pageIndex
          this.pageSize = this.pageSize
        }
        this.$http.get('/joys-rest/lss-customer/transfer/detail/',
          {
            params: {
              customerTransferId: this.customerTransferId,
              pageIndex: this.pageIndex,
              pageSize: this.pageSize
            }
          }).then(resp => {
          this.customerTransferDetailList = resp.body.rows
          this.totalPage = resp.body.total
        }, resp => {
          this.$message.error(resp.body.message)
        })
      },

      //展示添加按钮
      showAddAgain() {
        if (this.customerTransferDetailList&&this.customerTransferDetailList.length > 0) {
          return true
        }
        return false
      },
      // 客户移交弹出框切换至卡片
      changeToCard() {
        this.ifshowSelect = true
      },
      // 客户移交卡片切换至弹出框
      changeToSelect() {
        this.ifshowSelect = false
      },

      //子组件返回值
      returnValue(val) {
        this.multipleSelection = val.multipleSelection
        let flag = false
        //选择的客户大于一个必须校验为同一个部门
        if (this.multipleSelection.length > 1) {
          let arr = this.multipleSelection
          let deptName = this.multipleSelection[0].deptName
          arr.forEach((item, index, arr) => {
            if (deptName != item.deptName) {
              flag = true
            }
          })
        }else{
          this.confirmBtn=false
        }
        if (flag) {
          this.$alert('选择的客户必须为同一个部门的客户', '', {
            confirmButtonText: '确定',
          })
          this.confirmBtn=true
        }else{
          this.confirmBtn=false
        }
        },
      //确认选择客户
      confirm() {
        this.$http.put('/joys-rest/lss-customer/transfer/detail',
          this.multipleSelection
        ).then(resp => {
            this.$message({message: '保存成功', type: 'success'})
            this.confirmBtn = true
            this.changeToSelect()
            this.load()
            this.$emit('changeDept');
        }, resp => {
          this.confirmBtn = false
          this.$message.error(resp.body.message)
        })
      },

      //删除客户信息
      deleteCustomer(rowIndex, customerTransferDetail) {
        this.$http.delete('/joys-rest/lss-customer/transfer/detail/' + customerTransferDetail.customerTransferId + '/' + customerTransferDetail.customerId).then(resp => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.customerTransferDetailList.splice(rowIndex, 1)
          this.totalPage = this.totalPage - 1
        }, resp => {
          this.$message.error(resp.body.message)
        })
      },

      //批量删除客户信息
      deleteBatch(rowIndex, customerTransferDetail) {
        this.$http.post('/joys-rest/lss-customer/transfer/batch/',
          this.multipleSelection
        ).then(resp => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.load()
        }, resp => {
          this.$message.error(resp.body.message)
        })
      },

      handleSelectionChange(val) {
        if (val.length > 0) {
          this.deleteBatchStatus = true
        } else {
          this.deleteBatchStatus = false
        }
        this.multipleSelection = val;
        this.$emit('returnValue', {multipleSelection: this.multipleSelection})
      },
      cancelDelete(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.cancelDelete(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
        this.deleteBatchStatus = false
      }
    }
  }
</script>

<style scoped>
  .ft-dialog.ft-dialog__rich-title >>> .ft-dialog__title {
    width: 100%;
  }

  .el-button--text:hover, .el-button--text:focus {
    color: #409eff;
  }

  .el-button {
    font-size: 14px;
  }

  .el-button.el-button--primary {
    padding-top: 6px;
  }

  .el-table-column {
    overflow: hidden;
    white-space: nowrap; /*设置不换行*/
    text-overflow: ellipsis;
  }

  .md-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 200;
  }


</style>
